<template>
    <div>
        <el-form>
            <el-input v-model="form.name">

            </el-input>
            <el-input v-model="form.password">

            </el-input>
            <el-input v-model="form.captcha">
                <template #append>
                    <div style="height: 32px;width: 100%;" v-html="svgCapt" @click="getCaptcha"></div>
                </template>
            </el-input>
            <el-button type="submit" @click="submit">
                登录
            </el-button>

        </el-form>

    </div>
</template>

<script setup lang="ts">
import { useUserInfo } from "@/stores/modules/userInfo";
import { useRouter } from "vue-router";
import { login, getCaht } from "@/api/userInfo";
import { reactive, ref } from "vue";
const router = useRouter()
const svgCapt = ref('')
const form = reactive({
    captcha: '',
    name: '',
    password: ''
})
const getCaptcha = () => {
    getCaht().then((res) => {
        svgCapt.value = res as string
    })
}
getCaptcha()
const submit = () => {
    login({
        ...form
    }).then((res: any) => {
        useUserInfo().setUserInfo({
            userNmae: '123',
            token: res.data.token
        })
        router.push({ path: '/' })
    }).catch(() => {
        form.captcha = ''
        getCaptcha()
    })

}
</script>

<style scoped lang="scss">
:deep() .el-form {
    width: 400px;
    margin: 0 auto;
    margin-top: 300px;

    >div {
        margin-bottom: 16px;

        svg {
            height: 32px;
        }
    }

    .el-button {
        margin: 0 auto;
        display: flex;
    }
}
</style>
